import React from 'react';
import useAmis from '@/uses/useAmis';
import { createCustomComponent, createResourceCrudList } from '@/utils/amisUtils';

export function mapping(value:string, mapDataField:string) {
  return {
    "name": value,
    "type": "mapping",
    "labelField": "label",
    "valueField": "value",
    "source": mapDataField,
  }
}

function NavigationBar() {
  return <h1>店铺列表</h1>;
}

export default () => {
  const resourceName = 'shop';
  const json2 = createResourceCrudList({
    resourceName: resourceName,
    detailColumns: [
      {
        "type": "input-text",
        "name": "name",
        "label": "店铺名称"
      },
      {
        "type": "select",
        "source": "${shopPlatformList}",
        "name": "shopPlatform",
        "label": "平台"
      }],
    cardSpec: {
      title: "<h1>${name}</h1>",
      avatarFieldName: "name",
      actionBtnList: [
        {
          "label": "进入管理",
          "type": "button",
          "level": "info",
          "actionType": "link",
          "link": "/shop/detail?id=${id}"
        }
      ],
      body: [
        {
          "type": "flex",
          "justify": "space-start",
          "items": [
            {
              "type": "tpl",
              "tpl": "<strong>平台: </strong>"
            },
            {
              "type": "mapping",
              "name": "shopPlatform",
              "source": "${shopPlatformList}",
            }
          ]
        },
      ]
    }
  });

  const AmisComponent = useAmis({
    'type': 'page',
    "initApi": {
      "url": "/api/v1/shop/shopPlatformList",
      "method": "post",
      "responseData": {
        "shopPlatformList": "${items}",
      }
    },
    'body': [
      createCustomComponent({
        name: "test",
        compFn: () => (<NavigationBar/>)
      }),
      json2,
    ],
  });

  return (
    <div>
      <AmisComponent />
    </div>
  );
}